<template>
  <div class="chanpinshang-list-newadd">
    <input class="chanpins-newAdd" type="button" value="新增被授权商"  @click="dialogFormVisible = true"/>
    <el-dialog title="新增被授权商" :visible.sync="dialogFormVisible" custom-class="newAddLicenseWrapper" top="0">
      <el-form :model="form1" ref="form1" :rules="newAddLrules2">
        <el-form-item label="被授权商名称" :label-width="formLabelWidth"  name="inputLicense1" prop="sqsName2">
          <el-input v-model="form1.sqsName2" autocomplete="off" placeholder="请输入被授权商名称" maxlength="50"></el-input>
        </el-form-item>
        <div class="newaddLicense-wrap">
          <el-form-item label="联系人" :label-width="formLabelWidth"  name="inputLicense2">
            <el-input v-model="form1.sqsContactor" autocomplete="off" placeholder="请输入联系人" maxlength="40"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="formLabelWidth2"  name="inputLicense3" prop="sqsPhoneNumber2">
            <el-input v-model.number="form1.sqsPhoneNumber2" autocomplete="off" placeholder="请输入联系电话" maxlength="20"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="被授权商地址" :label-width="formLabelWidth"  name="selectAddr">
          <pvcity-area v-model="defultAddress"></pvcity-area>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"  name="inputLicense1">
          <el-input v-model="form1.sqsDetailedAddr" autocomplete="off" placeholder="请输入详细被授权商地址" maxlength="40"></el-input>
        </el-form-item>
        <div class="nlTitlebox">
          <div class="nltitle">
              设置账号
          </div>
          <div class="nlTip">
            该账号由给指定被授权商使用，用于图库提取和上传商品
          </div>
        </div>
        <el-form-item label="账号" :label-width="formLabelWidth"  name="inputLicense5" prop="newaddAccount">
          <el-input v-model="form1.newaddAccount" autocomplete="off" placeholder="请输入手机号码/电子邮箱" maxlength="50"></el-input>
        </el-form-item>
        <div class="backpwdBox">
          <div class="bpLeft">
            <div class="bpNamel">
              密码
            </div>
            <div class="bpContl">
              默认初始密码为yc1710
            </div>
          </div>
        </div>
        <div class="nlTitlebox">
          <div class="nltitle">
              收件信息
          </div>
          <div class="nlTip">
            该地址用于智能码的收取
          </div>
        </div>
        <div class="newaddLicense-wrap">
          <el-form-item label="联系人" :label-width="formLabelWidth"  name="inputLicense2">
            <el-input v-model="form1.receiptContactor" autocomplete="off" placeholder="请输入联系人" maxlength="40"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="formLabelWidth2"  name="inputLicense3" prop="receiptPhoneNumber2">
            <el-input v-model.number="form1.receiptPhoneNumber2" autocomplete="off" placeholder="请输入联系电话" maxlength="20"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="被授权商地址" :label-width="formLabelWidth"  name="selectAddr">
          <pvcity-area v-model="defultAddress"></pvcity-area>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"  name="inputLicense1">
          <el-input v-model="form1.receiptDetailedAddr" autocomplete="off" placeholder="请输入详细被授权商地址" maxlength="40"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PvcityArea from 'pages/commons/PvcityArea'
export default {
  name: 'NewaddLicensees',
  components: {
    PvcityArea
  },
  data () {
    //  验证手机号码是否正确
    function checkCellMobile (str) {
      var re = /^1\d{10}$/
      if (re.test(str)) {
        return true
      } else {
        return false
      }
    }
    //  验证输入邮箱是否正确
    function checkEmail (str) {
      var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
      if (re.test(str)) {
        return true
      } else {
        return false
      }
    }
    var checkPhoneNumber2 = (rule, value, callback) => {
      if (value) {
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入正确联系电话'))
          } else {
            callback()
          }
        }, 100)
      } else {
        callback()
      }
    }
    var checkPhoneNumber22 = (rule, value, callback) => {
      if (value) {
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入正确联系电话'))
          } else {
            callback()
          }
        }, 100)
      } else {
        callback()
      }
    }
    var checkBsqsName2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('被授权商名称不能为空'))
      } else {
        callback()
      }
    }
    var checkNewAccount = (rule, value, callback) => {
      if (value) {
        if (value.indexOf('@') !== -1) {
          if (checkEmail(value)) {
            callback()
          } else {
            callback(new Error('请输入正确邮箱'))
          }
        } else {
          if (checkCellMobile(value)) {
            callback()
          } else {
            callback(new Error('请输入正确手机号码'))
          }
        }
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      form1: {
        sqsName2: '',
        sqsContactor: '',
        sqsPhoneNumber2: '',
        sqsDetailedAddr: '',
        newaddAccount: '',
        receiptContactor: '',
        receiptPhoneNumber2: '',
        receiptDetailedAddr: ''
      },
      newAddLrules2: {
        sqsName2: [
          { validator: checkBsqsName2, trigger: 'blur' }
        ],
        sqsPhoneNumber2: [
          { validator: checkPhoneNumber2, trigger: 'blur' }
        ],
        receiptPhoneNumber2: [
          { validator: checkPhoneNumber22, trigger: 'blur' }
        ],
        newaddAccount: [
          { validator: checkNewAccount, trigger: 'blur' }
        ]
      },
      formLabelWidth: '131px',
      formLabelWidth2: '154px',
      //  地址默认值设置，可为空
      defultAddress: {
        sheng: '',
        shi: '',
        qu: ''
      }
    }
  }
}
</script>

<style lang="stylus">
@import '~styles/varibles.styl'
.chanpinshang-list-newadd .el-dialog__wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.newAddLicenseWrapper {
  width: 690px;
  min-height: 1px;
  border: 4px solid #fff;
  border-radius: 8px;
  margin: 0 auto;
}
.newAddLicenseWrapper .el-dialog__header {
  height: 45px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #fff;
  padding: 0 10px 0 18px;
}
.newAddLicenseWrapper .el-dialog__header .el-dialog__title {
  line-height: 44px;
  color: #333333;
  font-size: 16px;
}
.newAddLicenseWrapper .el-dialog__header .el-dialog__headerbtn {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.newAddLicenseWrapper .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
  color: rgb(189, 189, 189);
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.newAddLicenseWrapper .el-dialog__body {
  position: relative;
  padding: 25px 0 5px;
  color: #333333;
  font-size: 14px;
}
.newAddLicenseWrapper .el-form-item {
  margin-bottom: 20px;
}
.newAddLicenseWrapper .el-form-item__label {
  color: #333333;
  padding: 0 20px 0 0;
  position: relative;
  line-height: 36px;
}
.newAddLicenseWrapper .el-form-item__content {
  line-height: 36px;
}
.newAddLicenseWrapper .el-form-item[name='inputLicense1']>.el-form-item__label:after {
    content: '*';
    color: #ff2b2b;
    position: absolute;
    line-height: 36px;
    right: 8px;
}
.newAddLicenseWrapper .el-form-item[name='ipSelect2']>.el-form-item__label:after {
    content: '*';
    color: #ff2b2b;
    position: absolute;
    line-height: 36px;
    right: 8px;
}
.newAddLicenseWrapper .el-checkbox__inner {
  border: 1px solid #cccccc;
}
.newAddLicenseWrapper .el-checkbox__input.is-checked .el-checkbox__inner, .newAddLicenseWrapper .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $baseColor;
    border-color: $baseColor;
}
.newAddLicenseWrapper .el-checkbox{
  color: #333333;
  line-height: 36px;
}
.newAddLicenseWrapper .el-checkbox__input.is-checked+.el-checkbox__label {
    color: $baseColor;
}
.newAddLicenseWrapper .el-dialog__footer {
  padding: 0 0 30px;
  text-align: center;
  overflow: hidden;
}
.newAddLicenseWrapper .el-dialog__footer .el-button {
  width: 90px;
  height: 36px;
  line-height: 36px;
  padding: 0;
  text-align: center;
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
}
.newAddLicenseWrapper .el-dialog__footer .el-button--primary {
  color: #FFF;
  background-color: $baseColor;
  margin-left: 131px;
  float: left;
}
.newAddLicenseWrapper .el-input__inner {
  border: 1px solid #cccccc;
  height: 36px;
  line-height: 36px;
  width: 450px;
  box-sizing: border-box;
}
.newAddLicenseWrapper .el-form-item[name='inputLicense1'] .el-input__inner{
  width: 494px;
  box-sizing: border-box;
}
.newAddLicenseWrapper .newaddLicense-wrap {
  height: 51px;
}
.newAddLicenseWrapper .newaddLicense-wrap .el-form-item[name='inputLicense2'] {
  width: 271px;
  float: left;
}
.newAddLicenseWrapper .el-form-item[name='inputLicense5'] {
  margin-bottom: 10px;
}
.newAddLicenseWrapper .el-form-item[name='inputLicense5'] .el-input__inner {
  width: 280px;
}
.newAddLicenseWrapper .newaddLicense-wrap .el-form-item[name='inputLicense2'] .el-input__inner {
  width: 140px;
}
.newAddLicenseWrapper .newaddLicense-wrap .el-form-item[name='inputLicense3'] {
  width: 354px;
  float: left;
}
.newAddLicenseWrapper .newaddLicense-wrap .el-form-item[name='inputLicense3'] .el-input__inner {
  width: 200px;
}
.newAddLicenseWrapper .el-form-item[name='selectAddr'] {
  margin-bottom: 10px;
}
.newAddLicenseWrapper .el-form-item[name='selectAddr'] .el-form-item__content {
  width: 494px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.newAddLicenseWrapper .el-form-item[name='selectAddr'] .el-select .el-input__inner{
  width: 158px;
}
.newAddLicenseWrapper .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .newAddLicenseWrapper .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '';
    color: #fff;
    margin-right: 0px;
    height: 0;
    width: 0;
}
</style>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.chanpinshang-list-newadd
  margin-bottom 27px
  .chanpins-newAdd
    width 140px
    height 36px
    line-height 36px
    text-align center
    background-color $baseColor
    font-size 16px
    color #FFFFFF
    border-radius 4px
    cursor pointer
  .nlTitlebox
    height 40px
    width 650px
    margin 0 auto 20px
    border-bottom 1px solid #f2f2f2
    padding 10px 10px
    box-sizing border-box
    .nltitle
      height 20px
      line-height 20px
      font-size 16px
      color #333
      width 74px
      margin-right 25px
      display inline-block
      text-align right
      box-sizing border-box
      border-left 2px solid $baseColor
    .nlTip
      display inline-block
      height 20px
      line-height 20px
      font-size 14px
      color #999999
  .backpwdBox
    line-height 36px
    height 36px
    margin-bottom 20px
    font-size 0
    .bpLeft
      width 300px
      height 36px
      display inline-block
      .bpNamel
        width 131px
        height 36px
        line-height 36px
        font-size 14px
        color #333333
        box-sizing border-box
        padding-right 20px
        text-align right
        display inline-block
      .bpContl
        width 169px
        height 36px
        line-height 36px
        font-size 14px
        color #333333
        box-sizing border-box
        display inline-block
</style>
